import { useMemo } from 'react';
import moment from 'moment';

// --- 模拟数据 --- start
const mockData = [
  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  [31, 21, 0, 43, 5, 6, 27, 8, 9, 10, 17, 32, 34, 31],
  [11, 31, 39, 43, 25, 6, 17, 0, 19, 0, 37, 12, 23, 8],
  [21, 11, 41, 43, 5, 36, 37, 18, 23, 10, 17, 32, 13, 34],
  [61, 23, 21, 43, 0, 6, 17, 68, 11, 17, 67, 30, 20, 4],
  [31, 29, 31, 43, 15, 36, 20, 8, 19, 10, 17, 22, 14, 24],
];
const mockTotalData = new Array(14).fill(0);
mockData.forEach(item => {
  item.forEach((num, idx) => {
    mockTotalData[idx] += num;
  });
});
// --- 模拟数据 --- end
const colors = ['#CD0F54', '#EF4864', '#FF8F1F', '#FF5B05', '#FACC14', '#006EFF'];
const xData = (function() {
  const data = [];
  const now = moment();
  data.push(now.format('YYYY-MM-DD'));
  for (let i = 1; i < 14; i++) {
    data.unshift(now.subtract(1, 'days').format('YYYY-MM-DD'));
  }
  return data;
})();
const legendData = ['混管阳性人员', '密接', '复阳人员', '中高风险地区', '次密接', '其他'];

export default function useOptions() {
  const barSeries = legendData.map((label, idx) => {
    return {
      name: label,
      type: 'bar',
      stack: '总量',
      barMaxWidth: 30,
      itemStyle: {
        normal: {
          color: colors[idx],
          label: {
            show: false,
          },
        },
      },
      data: mockData[idx],
    };
  });

  const option = useMemo(() => {
    return {
      animation: false,
      title: {
        text: '近14天接收人数趋势图',
        x: '30',
        y: '5',
        textStyle: {
          color: '#696969',
          fontSize: 13,
          fontWeight: 400,
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        borderWidth: 1,
        borderColor: '#1890FF',
        backgroundColor: '#F3F9FF',
        padding: [5, 60, 5, 10],
        extraCssText: 'box-shadow: 0rem .0533rem .2133rem rgba(0, 0, 0, 0.391234);',
        textStyle: {
          fontSize: 14,
          color: '#1890FF',
          fontWeight: 400,
          lineHeight: 22,
        },
      },
      grid: {
        top: 60,
        bottom: 100,
        left: 80,
        right: 30,
      },
      legend: {
        x: 'center',
        bottom: '16',
        selectedMode: false,
        textStyle: {
          color: '#696969',
        },
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 37,
        data: legendData,
      },
      xAxis: [
        {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#0049AF',
              width: 2,
            },
          },
          axisLabel: {
            margin: 22,
            fontSize: 13,
            color: '#696969',
            // rotate: 25,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          data: xData,
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '（人）',
          nameTextStyle: {
            color: '#696969',
            fontSize: 11,
            padding: [0, 70, 0, 0],
          },
          axisLabel: {
            margin: 22,
            fontSize: 13,
            color: '#696969',
          },
          axisLine: {
            lineStyle: {
              color: '#0049AF',
              width: 2,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#67A6FC',
            },
          },
          axisTick: {
            show: false,
          },
          gridIndex: 0,
          splitArea: {
            show: false,
          },
        },
      ],
      series: [
        ...barSeries,
        {
          name: '总数',
          type: 'line',
          symbolSize: 8,
          symbol: 'circle',
          lineStyle: {
            normal: {
              color: '#1890FF',
              width: '2',
            },
          },
          itemStyle: {
            normal: {
              color: '#FFBE2D',
              borderColor: '#fff',
              borderWidth: 2,
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                backgroundColor: '#1890FF',
                fontSize: 11,
                fontWeight: 400,
                padding: [5, 15],
                borderRadius: 8.5,
              },
            },
          },
          data: mockTotalData,
          tooltip: {
            show: false,
          },
        },
      ],
      // dataZoom: [
      //   {
      //     show: true,
      //     height: 30,
      //     bottom: 30,
      //     start: 10,
      //     end: 80,
      //     handleIcon:
      //       'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      //     handleSize: '110%',
      //     handleStyle: {
      //       color: '#d3dee5',
      //     },
      //     textStyle: {
      //       color: '#67A6FC',
      //     },
      //     borderColor: '#90979c',
      //   },
      //   {
      //     type: 'inside',
      //     show: true,
      //     height: 15,
      //     start: 1,
      //     end: 35,
      //   },
      // ],
    };
  }, []);

  return option;
}
